<template>
  <div class="ele-body ele-body-ex ele-body-layout">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>信息流创意报告</span>
      </div>
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        class="ele-form-search"
        label-width="75px"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <div class="app-container">
          <div class="filter-container">
            <el-select
              v-model="where.bazaarId"
              clearable
              placeholder="推广市场"
              style="width: 180px; margin-right: 6px"
              @change="changebazaarId"
            >
              <template v-for="item in bazaarList">
                <el-option
                  v-if="item.status === 1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </template>
            </el-select>

            <el-select
              v-model="where.userId"
              clearable
              placeholder="推广账户"
              style="width: 180px; margin-right: 6px"
              @change="changeuserId"
            >
              <template v-for="item in expandList">
                <el-option
                  v-if="item.status === 1"
                  :key="item.userid"
                  :label="item.username"
                  :value="item.userid"
                />
              </template>
            </el-select>

            <el-select
              v-model="where.status"
              clearable
              placeholder="创意状态"
              style="width: 150px; margin-right: 6px"
              @change="reload"
            >
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.campaignId"
              collapse-tags
              multiple
              placeholder="推广计划"
              style="width: 260px; margin-right: 6px"
              @change="reload"
            >
              <el-option
                v-for="item in campaignList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-date-picker
              v-model="daterange"
              :clearable="false"
              :picker-options="pickerOptions"
              end-placeholder="数据结束日期"
              range-separator="-"
              start-placeholder="数据开始日期"
              style="width: 226px; margin-right: 6px"
              type="datetimerange"
              unlink-panels
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="onDateRangeChoose"
            />

            <el-button
              icon="el-icon-search"
              style="margin-right: 6px"
              type="primary"
              @click="reload"
              >搜索
            </el-button>

            <el-button
              icon="el-icon-refresh"
              style="margin-left: 2px"
              @click="reset"
              >重置
            </el-button>
          </div>
        </div>
      </el-form>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        :highlight-current-row="true"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :summary-method="summaries"
        :where="where"
        show-summary
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="$hasPermission('feedcreative:pause')"
            :disabled="selection.length === 0"
            icon="el-icon-set-up"
            size="small"
            style="
              background: #f5686f;
              border: 1px solid #f5686f;
              color: #ffffff;
            "
            @click="SetPauseBatch"
            >设置启用/暂停
          </el-button>

          <el-button
            v-if="$hasPermission('feedcreative:cloud')"
            icon="el-icon-basketball"
            size="small"
            style="
              background: #32a2d4;
              border: 1px solid #32a2d4;
              color: #ffffff;
            "
            @click="SetCloudBatch"
            >获取最新数据
          </el-button>
        </template>

        <!-- 推广账户列 -->
        <template slot="userId" slot-scope="{ row }">
          <template v-for="item in tempexpandList">
            <span v-if="row.userId === item.userid" :key="item.id">
              {{ item.username }}
            </span>
          </template>
        </template>

        <!-- 推广市场列 -->
        <template slot="bazaarId" slot-scope="{ row }">
          <template v-for="item in bazaarList">
            <span v-if="row.bazaarId === item.id" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 创意状态列 -->
        <template slot="status" slot-scope="{ row }">
          <template v-for="item in statusList">
            <span v-if="row.status === item.id" :key="item.id">
              <el-tag v-if="row.status === 0" size="mini" type="success">{{
                item.name
              }}</el-tag>
              <el-tag v-if="row.status !== 0" size="mini" type="danger">{{
                item.name
              }}</el-tag>
            </span>
          </template>
        </template>

        <!-- 点击率列 -->
        <template slot="ctr" slot-scope="{ row }">
          <span>{{ row.ctr }}% </span>
        </template>

        <!-- 现金消费列 -->
        <template slot="cash" slot-scope="{ row }">
          <el-popover
            placement="top-start"
            popper-class="cash-remove-popover"
            title="消费明细"
            trigger="hover"
            width="200"
            @hide="popoverHide"
          >
            现金消费{{ row.cash }}元, 账户返点: {{ row.rebate }}
            <span slot="reference" style="cursor: pointer">{{ row.cash }}</span>
          </el-popover>
        </template>

        <!-- 同步时间列 -->
        <template slot="cloudDatatime" slot-scope="{ row }">
          {{ formatTime(row.datatime) }}
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 弹出同步窗口 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="'获取最新数据'"
      :visible.sync="feedCreativeCloudShow"
      class="ele-dialog-view"
      custom-class="ele-dialog-form"
      width="640px"
      @closed="feedCreativeCloudForm = {}"
    >
      <el-form ref="feedCreativeCloudForm" :model="feedCreativeCloudForm">
        <div style="height: 356px">
          <div
            :style="{
              'border-radius': '4px',
              float: 'left',
              'margin-left': '10px',
              width: '170px',
              'pointer-events': feedCreativeLeftDisabled ? 'none' : '',
              opacity: feedCreativeLeftDisabled ? '.7' : '1.0',
            }"
          >
            <div style="margin: 6px 0"><span>请选择要同步的账户</span></div>
            <el-checkbox
              v-model="feedCreativeHandleCheckAll"
              :indeterminate="feedCreativeIndeterminate"
              @change="feedCreativeHandleCheckAllChange"
            >
              全选/反选
            </el-checkbox>
            <div style="margin: 10px 0"></div>
            <div class="ele-left-layout">
              <el-checkbox-group
                v-model="feedCreativeCheckedUserId"
                @change="handlefeedCreativeCheckedUserIdChange"
              >
                <template v-for="item in tempexpandList">
                  <el-checkbox
                    v-if="item.status === 1"
                    :key="item.id"
                    :label="item.userid"
                    style="width: 140px; font-size: 12px"
                    >{{ item.username }}
                  </el-checkbox>
                </template>
              </el-checkbox-group>
            </div>
          </div>
          <div class="ele-right-layout">
            <div style="margin: 6px 0"><span>同步结果</span></div>
            <div>
              <el-input
                v-model="feedCreativeCloudResult"
                :readonly="true"
                resize="none"
                type="textarea"
              />
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button size="medium" @click="feedCreativeCloudShow = false"
          >取消
        </el-button>
        <el-button
          :loading="feedCreativeCloudLoading"
          size="medium"
          type="primary"
          @click="cloudBatchSave"
          >确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 状态编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="'设置计划状态'"
      :visible.sync="PauseShowEdit"
      custom-class="ele-dialog-form"
      width="420px"
      @closed="PauseForm = {}"
    >
      <el-form ref="PauseForm" :model="PauseForm" label-width="82px">
        <el-form-item label="暂停状态:">
          <el-radio v-model="PauseForm.pause" :label="0">启用</el-radio>
          <el-radio v-model="PauseForm.pause" :label="1">暂停</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="PauseShowEdit = false">关闭</el-button>
        <el-button :loading="PauseLoading" type="primary" @click="setPauseSave"
          >确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "feedCreative",
  data() {
    return {
      //数据合计
      total: Object,

      // 创意状态
      statusList: [
        { id: 0, name: "有效" },
        { id: 1, name: "暂停推广" },
        { id: 2, name: "审核中" },
        { id: 3, name: "审核未通过" },
        { id: 4, name: "无效" },
      ],

      // 同步账户选中账户
      feedCreativeCheckedUserId: [],
      // 同步账户选中账户
      feedCreativeHandleCheckAll: false,
      // 同步账户选中账户
      feedCreativeIndeterminate: false,
      // 同步账户选中账户
      feedCreativeLeftDisabled: false,
      // 同步表单数据
      feedCreativeCloudForm: {},
      // 同步表单按钮
      feedCreativeCloudLoading: false,
      // 是否显示编辑弹窗
      feedCreativeCloudShow: false,
      // 同步数据结果
      feedCreativeCloudResult: "",

      // 状态弹窗
      PauseShowEdit: false,
      // 状态表单
      PauseForm: {},
      // 状态加载中
      PauseLoading: false,

      // 账户列表
      expandList: [],
      // 账户列表
      tempexpandList: [],
      // 推广计划
      campaignList: [],
      //市场列表
      bazaarList: [],
      // 表格高度
      defaultHeight: 0,
      // 筛选日期范围
      daterange: this.getDaterange(),
      // 日期时间选择器快捷项
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime());
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 7 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 15 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 30 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 90 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 180 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 365 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 表格数据接口
      url: "/feedCreative/method",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
        },
        {
          prop: "userId",
          label: "推广账户",
          slot: "userId",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "bazaarId",
          label: "推广市场",
          slot: "bazaarId",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "campaignName",
          label: "计划",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "adgroupName",
          label: "单元",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "title",
          label: "创意标题",
          showOverflowTooltip: true,
        },
        {
          prop: "impression",
          label: "展现",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "clicks",
          label: "点击",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "cost",
          label: "消费",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "cash",
          slot: "cash",
          label: "现金消费",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "cpc",
          label: "CPC",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "ctr",
          slot: "ctr",
          label: "点击率",
          sortable: "custom",
          resizable: false,
        },
        {
          width: 100,
          prop: "copynumber",
          label: "目标转化量",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          width: 110,
          prop: "copycost",
          label: "目标转化成本",
          sortable: true,
          resizable: false,
        },
        {
          prop: "status",
          slot: "status",
          label: "创意状态",
          sortable: "custom",
          resizable: false,
        },
        {
          prop: "datatime",
          label: "同步时间",
          sortable: "custom",
          resizable: false,
          slot: "cloudDatatime",
          showOverflowTooltip: true,
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    summaries(param) {
      const { columns, data } = param,
        createDiv = function (t1, t2) {
          return (() => {
            return (
              <el-col>
                <el-col class="el-table_target_sum">{t1}</el-col>
                <el-col class="el-table_target_bar"></el-col>
                <el-col class="el-table_target_total">{t2}</el-col>
              </el-col>
            );
          })();
        };
      let result = [],
        sum1 = 0,
        sum2 = 0,
        sum3 = 0,
        sum4 = 0,
        sum5 = 0,
        sum6 = 0,
        sum7 = 0,
        sum8 = 0,
        sum9 = 0,
        sum10 = 0;
      columns.forEach((column, index) => {
        switch (column.property) {
          case "title":
            result[index] = createDiv("小计", "合计");
            break;

          case "impression":
            sum1 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum1, this.total.impression);
            break;

          case "clicks":
            sum2 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum2, this.total.clicks);
            break;

          case "cost":
            sum3 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum3, this.total.cost);
            break;

          case "cash":
            sum4 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum4, this.total.cash);
            break;

          case "cpc":
            sum5 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum5, this.total.cpc);
            break;

          case "ctr":
            sum6 = (sum2 / sum1) * 100;
            if (isNaN(sum6)) {
              sum6 = 0;
            }
            sum9 = (this.total.clicks / this.total.impression) * 100;
            if (isNaN(sum9)) {
              sum9 = 0;
            }
            result[index] = createDiv(
              sum6.toFixed(2) + "%",
              sum9.toFixed(2) + "%"
            );
            break;

          case "copynumber":
            sum7 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum7, this.total.copynumber);
            break;

          case "copycost":
            sum8 = this.getcolumn(data, column.property, false);
            if (sum7 == 0) {
              sum10 = sum8;
            } else {
              sum10 = sum3 / sum7;
              if (sum10 > 0) {
                sum10 = sum10.toFixed(2);
              }
              if (isNaN(sum10)) {
                sum10 = sum8;
              }
            }
            result[index] = createDiv(sum10, this.total.copycost);
            break;
        }
      });
      return result;
    },

    getcolumn(data, column, integer) {
      if (data.length === 0) {
        return 0;
      }
      let sums = 0;
      const values = data.map((item) => Number(item[column]));
      if (!values.every((value) => isNaN(value))) {
        sums = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
      }
      if (integer) {
        return sums;
      }
      return sums.toFixed(2);
    },

    popoverHide() {
      const popover = document.getElementsByClassName("cash-remove-popover");
      for (let i = 0; i < popover.length; i++) {
        popover[i].remove();
      }
    },

    SetPauseBatch() {
      if (!this.$hasPermission("feedcreative:pause")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.PauseLoading = false;
      this.PauseForm = { pause: 0 };
      this.PauseShowEdit = true;
    },

    /*确定状态表单*/
    setPauseSave() {
      this.$refs["PauseForm"].validate((valid) => {
        if (valid) {
          this.PauseLoading = true;
          this.PauseForm.selectId = this.selection.map((d) => d.id);
          this.$http
            .put("/feedCreative/setPause", this.PauseForm)
            .then((res) => {
              this.PauseLoading = false;
              if (res.data.code === 0) {
                this.PauseShowEdit = false;
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.PauseLoading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    feedCreativeHandleCheckAllChange(val) {
      let userId = [];
      for (let i = 0; i < this.tempexpandList.length; i++) {
        if (this.tempexpandList[i].status === 1) {
          userId.push(this.tempexpandList[i].userid);
        }
      }
      this.feedCreativeCheckedUserId = val ? userId : [];
      this.feedCreativeIndeterminate = false;
      this.feedCreativeCloudResult = "";
    },

    handlefeedCreativeCheckedUserIdChange(value) {
      let checkedCount = 0;
      for (let i = 0; i < this.tempexpandList.length; i++) {
        if (this.tempexpandList[i].status === 1) {
          checkedCount++;
        }
      }
      let count = value.length;
      this.feedCreativeCloudResult = "";
      this.feedCreativeHandleCheckAll = count === checkedCount;
      this.feedCreativeIndeterminate = count > 0 && count < checkedCount;
    },

    changebazaarId(id) {
      let arrayList = [];
      this.where.userId = "";
      for (let i = 0; i < this.tempexpandList.length; i++) {
        if (this.tempexpandList[i].bazaarId === id) {
          arrayList.push(this.tempexpandList[i]);
        }
      }
      this.expandList = arrayList;
      this.reload();
    },

    changeuserId(obj) {
      this.campaignList = [];
      this.where.campaignId = "";
      this.$http
        .post("/FeedCreative/getCampaign", { userid: obj })
        .then((res) => {
          if (res.data.code === 0) {
            this.campaignList = res.data.campaign;
            this.reload();
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    // 更新最新单元数据
    SetCloudBatch() {
      if (!this.$hasPermission("feedcreative:cloud")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.feedCreativeCloudForm = {};
      this.feedCreativeCloudResult = "";
      this.feedCreativeCloudLoading = false;
      this.feedCreativeCloudShow = true;
    },

    /* 开始同步账户 */
    cloudBatchSave() {
      if (this.feedCreativeCheckedUserId.length === 0) {
        this.$message.error("请选择要同步的账户!");
        return;
      }
      this.$refs["feedCreativeCloudForm"].validate((valid) => {
        if (valid) {
          this.feedCreativeLeftDisabled = true;
          this.feedCreativeCloudLoading = true;
          let requestArrayName = [],
            requestArray = [],
            userArrayName = [];
          for (let i = 0; i < this.tempexpandList.length; i++) {
            if (
              this.feedCreativeCheckedUserId.indexOf(
                this.tempexpandList[i].userid
              ) > -1
            ) {
              requestArrayName.push(
                "[" + this.tempexpandList[i].username + "] 开始同步数据.\n"
              );
              userArrayName.push(this.tempexpandList[i].username);
              requestArray.push(
                this.$http.put("/feedCreative/getCloud", {
                  userId: this.tempexpandList[i].userid,
                })
              );
            }
          }
          this.feedCreativeCloudResult = requestArrayName.join("");
          Promise.all(requestArray)
            .then((items) => {
              items.forEach((item, index) => {
                requestArrayName.push(
                  "[" + userArrayName[index] + "] " + item.data.msg + ".\n"
                );
              });
              this.feedCreativeCloudResult = requestArrayName.join("");
              this.feedCreativeCheckedUserId = [];
              this.feedCreativeLeftDisabled = false;
              this.feedCreativeHandleCheckAll = false;
              this.feedCreativeIndeterminate = false;
              this.feedCreativeCloudLoading = false;
              this.reload();
            })
            .catch((e) => {
              this.feedCreativeCloudResult = "网络异常同步失败!";
              this.feedCreativeCloudLoading = false;
              this.feedCreativeLeftDisabled = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    /*默认时间*/
    getDaterange() {
      let start = new Date();
      start.setTime(start.getTime());
      start =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      let end = new Date();
      end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
      end =
        end.getFullYear() +
        "-" +
        (end.getMonth() + 1) +
        "-" +
        end.getDate() +
        " 00:00:00";
      return [start, end];
    },

    /* 日期选择改变回调 */
    onDateRangeChoose() {
      if (this.daterange && this.daterange.length === 2) {
        this.where.createTimeStart = this.daterange[0];
        this.where.createTimeEnd = this.daterange[1];
      } else {
        this.where.createTimeStart = null;
        this.where.createTimeEnd = null;
      }
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /*表格数据加载*/
    parseData(res) {
      if (res.code === 0) {
        this.tempexpandList = res.expand;
        this.bazaarList = res.bazaar;
        this.total = res.total;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      let daterange = this.getDaterange();
      if (daterange.length === 2) {
        this.where.createTimeStart = daterange[0];
        this.where.createTimeEnd = daterange[1];
      }
      this.daterange = daterange;
      this.reload();
    },

    /*时间格式化*/
    formatTime(value) {
      const stamp = new Date().getTime() - new Date(value).getTime();
      if (stamp >= 1000 * 60 * 60 * 24) {
        return ((stamp / 1000 / 60 / 60 / 24) | 0) + "天前";
      } else if (stamp >= 1000 * 60 * 60) {
        return ((stamp / 1000 / 60 / 60) | 0) + "小时前";
      } else if (stamp >= 60000) {
        //1分钟以内为：刚刚
        return ((stamp / 1000 / 60) | 0) + "分钟前";
      }
      return "刚刚";
    },
  },
};
</script>

<style scoped>
.ele-table-tool .is-disabled {
  cursor: not-allowed;
  filter: Alpha(opacity=0.35);
  -moz-opacity: 0.35;
  opacity: 0.35;
}

.ele-left-layout {
  width: 186px;
  height: 262px;
  padding: 10px;
  margin-bottom: 10px;
  overflow-y: auto;
  border: 1px solid var(--border-color-base);
  box-shadow: var(--header-light-shadow);
}

.ele-right-layout {
  float: right;
  margin-top: 28px;
  width: 386px;
}

.ele-dialog-view /deep/ .el-dialog__body {
  padding: 16px 20px 0 8px !important;
}

.ele-dialog-view /deep/ .el-textarea__inner {
  box-shadow: var(--header-light-shadow);
  border-radius: 0 !important;
  min-height: 285px;
  height: 285px;
}

.ele-dialog-view /deep/ .el-checkbox__label {
  font-size: 12px !important;
}

.ele-dialog-view /deep/ .el-checkbox__label {
  font-size: 12px !important;
}

.ele-body-ex /deep/ .el-select__tags {
  max-width: none !important;
}
</style>
